<template>
	<view class="page-content">
		<form @submit="formSubmit" @reset="formReset" class="uni-form b-t">
			<view class="flex flex-row uni-form-item flex-middle b-b">
				<view class="title">旧密码</view>
				<input class="flex-item uni-input" name="oldPassword" type="text" password placeholder="请输入旧密码" />
			</view>
			<view class="flex flex-row uni-form-item flex-middle b-b">
				<view class="title">新密码</view>
				<input class="flex-item uni-input" name="password" type="text" password placeholder="请输入新密码" />
			</view>
			<view class="flex flex-row uni-form-item flex-middle b-b">
				<view class="title">确认密码</view>
				<input class="flex-item uni-input" name="confirmPassword" type="text" password placeholder="请再次输入新密码" />
			</view>
			<view class="btn-wrap">
				<button form-type="submit" type="primary">提 交</button>
				<button form-type="reset" type="default">重 置</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formValue:{
					oldPassword:'',
					password:'',
					confirmPassword:''
				}
			};
		},
		methods:{
			formSubmit(e){
				this.formValue = e.detail.value
				if(!this.formValue.oldPassword) return uni.showToast({
					icon:'none',
					title: '请输入旧密码'
				});
				if(this.formValue.password != this.formValue.confirmPassword) return uni.showToast({
					icon:'none',
					title: '两次密码不相同，请重新输入'
				});
				
				this.request()
			},
			formReset(e){
				console.log(e)				
			},
			request(){
				this.$$.request({
					url: this.config.editPassword,
					data: {
						oldPassword:this.formValue.oldPassword,
						newPassword:this.formValue.confirmPassword
					},
					method: "POST"
				}, true, true).then((res) => {
					uni.showToast({
						icon:'none',
						title: '修改成功,请重新登录'						
					});
					setTimeout(function(){
						uni.reLaunch({
							url:'../login/login'
						})
					},2000)
				}).catch((Error) => {
					console.log(Error.msg)
				}).finally(() => {
					console.log('complete')
				})
			}
		}
	}
</script>

<style lang="scss">
page {
	background: #F4F4F4;
}
.page-content {
	padding: 30upx 0;
}
uni-form {
	display: block;
	.uni-form-item {
		height: 100upx;
		background-color: $uni-bg-color;
		.title {
			
			display: inline-block;
			width: 120upx;
			padding: 0 30upx;
			margin-right: 30upx;
			text-align: justify;
			height: 0;
			line-height: 0;
			font-size: 30upx;
			&::after {
				content: '';
				display: inline-block;
				height: 0;
				width: 100%;
			}
		}
	}
	.btn-wrap {
		margin-top: 80upx;
		padding: 0 $uni-spacing-row-base;
		uni-button {
			margin-bottom: $uni-spacing-col-base;
		}
	}
}
uni-button {
	border: 0;
}
</style>
